<template>
  <div>
    <div ref="chart" style="width: 1200px; height: 400px;"></div>
    <div style="display: flex; width: 100%; height: 400px;">
      <div ref="chart1" style="width: 60%; margin-right: 5%; height: 400px; "></div>
      <div ref="chart2" style="width: 30%; height: 400px"></div>
    </div>
    
  </div>
</template>
<script>

import { Icon } from 'ant-design-vue';
import * as echarts from 'echarts';
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});
export default {
  components: {
    IconFont,
  },
  // mixins: [preventBack], //禁止返回上一页
  data() {
    return {
      chart: null,
      chart1: null,
      chart2: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      this.chart1 = echarts.init(this.$refs.chart1);
      this.chart2 = echarts.init(this.$refs.chart2);
      const option = {
        title: {
          text: '平均值(X图)'
        },
        tooltip: {},
        xAxis: {
          name:'子组数',
          data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
        },
        yAxis: {
          type : 'value',
            axisLabel : {
                formatter: '{value}'
            },
            min:226.92,
            max:227.06,
            minInterval:0.02,
            maxInterval:0.02
        },
        series: [
          {
          name: '均值',
          type: 'line',
          data: [226.99, 227.02,227.06,227.03,226.98,226.99, 227.02,227.06,227.03,226.98,226.99, 227.02,227.06,227.03,226.98,226.99, 227.02,227.06,227.03,226.98]
        },{
          name: '均值',
          type: 'bar',
          data: [226.99, 227.02,227.06,227.03,226.98,226.99, 227.02,227.06,227.03,226.98,226.99, 227.02,227.06,227.03,226.98,226.99, 227.02,227.06,227.03,226.98]
        }
      ]
      };
      this.chart.setOption(option);
      this.chart1.setOption(option);
      this.chart2.setOption(option);
    }
  }
};


</script>
<style scoped>
.icons-list >>> .anticon {
  margin-right: 6px;
  font-size: 24px;
}
</style>